<template>
  <div id="Box">
    <button @click="download">下载影像</button>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { useMyHTTP } from "../http";
const { header } = useMyHTTP();

const download = async () => {
  const body = {
    geojson:
      '{"type":"Polygon","coordinates":[[[113.024294,23.156525],[113.019625,23.126219],[113.050781,23.106972],[113.069387,23.146993],[113.024294,23.156525]]]}',
    layerId: 31,
  };

  axios
    .post("http://192.168.1.147:8082/layer/downloadImg", body, {
      responseType: "blob",
      ...header,
    })
    .then(
      (res) => res.data,
      (error) => {
        console.log(error);
      }
    )
    .then((res) => {
      if (res.type == "application/zip") {
        const href = URL.createObjectURL(res);
        const a = document.createElement("a");
        a.href = href;
        a.download = "123.zip";
        a.click();
      } else {
        const reader = new FileReader();
        reader.onload = (evt) => {
          const { msg } = JSON.parse(evt.target?.result as string);
          console.log(msg);
        };
        reader.readAsText(res);
      }
    });
};
</script>

<style scoped lang="less">
#Box {
}
</style>
